<template>
  <div>
    <div v-for="v in car" :key="v.id" style="display: flex">
      <van-checkbox v-model="v.checked"></van-checkbox>
      <div style="flex:1">
         <van-card
        :price="v.price.toFixed(2)"
        :desc="v.desc"
        :title="v.title"
        :thumb="v.url"
      >
        <template #num>
          <van-stepper v-model="v.count" @overlimit="overlimit(v.id)"/>
        </template>
      </van-card>
      </div>
    </div>
    <!-- 底部价钱 -->
    <van-submit-bar :price="totalPrice*100" button-text="提交订单">
      <van-checkbox v-model="checkAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>


<script>
import { mapState, mapGetters } from "vuex";
import { Dialog } from 'vant';
export default {
  name: "Car",
  computed: {
    // 获取购物车
    ...mapState(["car"]),
    // 获取总价
    ...mapGetters(['totalPrice']),
    // 全选
    checkAll: {
      // 自己的选中状态 依赖 其他所有人状态
      get() {
        return this.car.every(item => item.checked)
      },
      // 让其他的状态 和全选保持一直
      set(check) {
        this.car.forEach(item => item.checked = check)
      }
    }
  },
  methods: {
    // 减少数量为1 触发
    overlimit(id) {
      // 弹框 
      Dialog.confirm({
        title: '警告',
        message: '在减少就要删除了！！！',
      })
        .then(() => {
          // on confirm
          // 删除  购物车 
          this.$store.commit('Delete_Car',id)
        })
        .catch(() => {
          // on cancel
        });
          }
        }
};
</script>